//定义全局变量
var element_key;
var element_gid;
var time=new Date();
var year=time.getFullYear(); //获取年份
var month=time.getMonth()+1; //获取月份
var day=time.getDate();  //获取日期
if(parseInt(day)<10){
    day='0'+day;
}
var start_time = 0;
var end_time = 0;
var start_time_t = 0;
var end_time_t = 0;
if (month==1){
    start_time = (year-1) + "年12月01日";
    end_time = year + "年01月"+ day +"日";
}else{
    start_time = year + "年"+ (month-1) +"月01日";
    end_time = year + "年"+ month +"月"+ day +"日";
}

//layui设置
layui.use(['jquery', 'form', 'table', 'layer', 'laydate',  'element', 'tree', 'util', 'carousel'], function(){
    $ = layui.$;
    form = layui.form;
    table = layui.table;
    layer = layui.layer;
    laydate = layui.laydate;
    element = layui.element;
    tree = layui.tree;
    util = layui.util;
    carousel = layui.carousel;


    laydate.render({
        elem: '#start_date', //指定元素
        type: 'date',
        value: start_time,
        format: 'yyyy年MM月dd日',
        trigger: 'click',
        showBottom: false,
        // 选中某个年份后即刻关闭弹出框，年份扔可以左右点击选择
        done: function(value, date, endDate){


        },
    });

    laydate.render({
        elem: '#end_date', //指定元素
        type: 'date',
        value: end_time,
        format: 'yyyy年MM月dd日',
        trigger: 'click',
        showBottom: false,
        // 选中某个年份后即刻关闭弹出框，年份扔可以左右点击选择
        done: function(value, date, endDate){


        },
    });



});

//监测图表
var HYChart1 = echarts.init(document.getElementById('real_time_chart'));

let Data = {
    times: ["2019-10-28 11:00:00", "2019-10-28 12:00:00", "2019-10-28 13:00:00", "2019-10-28 14:00:00", "2019-10-28 15:00:00", "2019-10-28 16:00:00", "2019-10-28 17:00:00", "2019-10-28 18:00:00", "2019-10-28 19:00:00", "2019-10-28 20:00:00", "2019-10-28 21:00:00", "2019-10-28 22:00:00"],
    timeData: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
    windxData: ["东南", "北", "东南", "东", "东南", "东南", "西", "北", "南", "东南", "东南", "东南"],
    windsData: ["2.8/2", "1.4/1", "2.7/2", "3/2", "2.2/2", "1.4/1", "1.5/1", "1.9/2", "1.4/1", "1.8/2", "2/2", "3.4/3"],
    temData: [9, 11, 13, 12, 11, 9, 9, 7, 6, 4, 3, 3],
    rainData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    humData: [76, 76, 70, 62, 58, 53, 50, 49, 46, 44, 44, 42],
};

let colors = ['#FF6863', '#6EAB40', '#3BB5F5'];

option = {
    color: colors,
    toolbox: {
        feature: {
            saveAsImage: { show: true }
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' },
        formatter: function (params, ticket, callback) {
            let index = params[0].dataIndex;
            let Htm = `雨量：${Data.humData[index]}mm`;
            return Htm;
        }
    },
    legend: {
        data: ['雨量']
    },
    grid: {
        top: '13%',
        bottom: '8%',
        left: '8%',
        right: '6%'
    },

    xAxis: [
        {
            type: 'category',
            position: 'bottom',
            offset: 0,
            // axisLabel: {
            //     textStyle: {
            //         color: 'rgba(255,255,255,.2)',
            //         // opacity: 0.1,
            //     }
            // },
            // axisLine:{
            //     lineStyle:{
            //         color:'rgba(255,255,255,.2)',
            //     }
            // },
            data: Data.timeData
        }
    ],
    yAxis: [{
            type: 'value',
            name: '雨量(mm)',
            scale: true,
            position: 'left',
            axisTick: { lineStyle: { color: colors[2] }, inside: true },
            nameTextStyle: { color: colors[2] },
            axisLabel: { color: colors[2] },
            splitLine: { show: false }
        }
    ],
    series: [{
            name: '雨量',
            type: 'line',
            step: false,
            yAxisIndex: 0,
            color: colors[2],
            label: { normal: { show: true, position: 'top' } },
            data: Data.humData
        }
    ]
};

$(document).ready(function(){
    HYChart1.setOption(option);
});


